 
html,body{height: 100vh;width: 100vw;overflow: hidden; 
  box-sizing: border-box;} 

@size:10.805vh; 
.w-485{
// width: 24.25rem;
width:25rem;
}
.dou{
  font-size: (24/@size);
font-family: Roboto;
font-weight: 400;
color: #FFFFFF
}
.dian{
  width: .2rem;
height: (4/@size);
background: #FF2654;
border-radius:(2/@size);
margin-top: (22/@size);
}
.mt-30{
margin-top:(30/@size);
}
.mt-31{
margin-top:(31/@size);
}
.mt-32{
margin-top:(32/@size);
}
.mt-67{
  margin-top:(67/@size);
  }
  .mt-50{
    margin-top:(50/@size);
    }
.mt-7{
margin-top:(7/@size);
}
.mt-15{
margin-top:(15/@size);
}
.mr-20{
margin-right: 1rem;
}
.mt-40{
margin-top:(40/@size);
}
.mt-20{
  margin-top:(20/@size);
  }
.mt-10{
margin-top:(10/@size);
}
.mb-62{
margin-bottom:(62/@size);
}
.mb-15{
margin-bottom:(15/@size);
}
.mb-3{
margin-bottom:(3/@size);
}
.mb-21{
margin-bottom:(21/@size);
}
.mr-36{margin-right: 1.8rem;}
.mb-40{
margin-bottom:(40/@size);
}
.left_xzzc {
  // font-size: .9rem; 
  font-size: (18/@size);

  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
   
  width: 24.25rem;
  height: (40/@size);
  background: url("/image/num_xc/left_xz_pay.png") no-repeat;
  background-size: 100% 100%;
}
.container{
  height: 100vh;width: 100vw; 
  // height: 100%;
  background: url("/image/num_xc/containerbg.png") no-repeat top center; 
  background-size: 100% 100%;
  .top {
      // height: 4.4271vw;
      // height: 4.25rem;
      height: (85/@size);
      // position: relative;
      background: url("/image/num_xc/topbg.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: (85/@size);
      // font-size: 1.6rem;
      font-size: (32/@size);

      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 0px 0px 12px #009eff;
    }

    .box {
      padding: 1.0417vw 1.0417vw  0; 
      display: flex;
      overflow: hidden;
      box-sizing: border-box;
      // padding: 2rem; 
      .box_left {
          overflow: hidden;
          box-sizing: border-box;
          // padding: 2rem 1.5rem 0;
          padding:(40/@size) 1.5rem 0;

          width: 28.9063vw; 
          height: (955/@size);
       
        background: url("/image/num_xc/left.png") no-repeat;
        background-size: 100% 100%;
        .qihoubox {
          overflow: hidden;
          box-sizing: border-box;
          width:3.6rem;
          height: (68/@size); 
          padding-top:(14/@size);
          background: linear-gradient(
            0deg,
            #ffa13f 0%,
            #1890ff 0%,
            rgba(3, 20, 57, 0) 100%
          );
           background: url("/image/num_xc/shid.png") no-repeat;
          background-size: 100% 100%;
          // opacity: 0.3;
          .qihoutitle {
            // font-size: .7rem;
            font-size: (14/@size);

            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #a5b6d3;
          }
          .qihounum {
            // font-size: .9rem;
            font-size: (18/@size);

            font-family: Roboto;
            font-weight: 400;
            color: #1affe4;
            margin-bottom:(4/@size);
           
          }
        }
        .select_box {
          width: 5rem;
          height: (30/@size); 
          background: rgba(3, 20, 57, 0);
          border: 0.1rem solid #00ceff;
          // padding-left: .4rem; 
          .select_box_left{
            width:.35rem;
            height: (7/@size);
            margin-right: .4rem;
            margin-left: .4rem;
            background: url('/image/num_xc/right_quan.png') no-repeat;
            background-size: 100% 100%;
          }
          .select_box_title{
            // font-size: .7rem;
            font-size: (14/@size);

            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #00CEFF
          }
          .select_box_right{
            width: 1.55rem;
            height: (29/@size); 
            margin-left: .95rem;
            background: url('/image/num_xc/right_select.png') no-repeat;
            background-size: 100% 100%;
          }
        } 
        .xzzc_top_e{
          width: 14rem;
          //  margin-top: 1.5rem;
          margin-top:(30/@size);

          //  height: (324/@size);
            height:(280/@size);
          //  width: 100%;
          //  border: 1px solid red;

        }
        .xzzc_bottom_e{
          // margin-top: 3.2rem;
          // height: (260/@size);
          height: (240/@size);

         //  width: 100%;
          // border: 1px solid red;
          .staijianc_noactive { 
            // box-sizing: border-box;
            
            width: 3.55rem;
            height:(71/@size);
            background: url("/image/num_xc/leftshengt.png") no-repeat;
            background-size: 100% 100%;
            // font-size: .7rem;
            font-size: (14/@size);

            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #a5b6d3;
          }
          .shuiq{
            height: (275/@size);
           
            // border: 1px solid red;

          }
        }
        // 库存的雷达图
        .leidatu{
          width: 13.45rem;
          height: (269/@size);
          border: 1px solid;
        }
        // 库存的雷达图的list
        .leidalist{
          overflow: hidden;
          box-sizing: border-box;
          width: 10.5rem;
          // padding: .8rem .75rem 0rem;
          padding: (16/@size) .75rem 0rem;

          height: (267/@size);
          background:#04245A; 
          border-radius: 6px;
          // font-size: .7rem;
          font-size: (14/@size);

          font-family: SourceHanSansSC-Regular;
          font-weight: 400;
          color: #A5B6D3;
          .box_right_top_list_item{
              // border: 1px solid;
              padding: 0;
              // margin-bottom: 1.15rem;
              margin-bottom: (10/@size); 
            .yjtitle{
              // width: 80px;
              // font-size: .7rem;
              font-size: (14/@size);

              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #A5B6D3;
              

            }
            .yjicon{
              width: .8rem;
              height: (18/@size);
              background: url("/image/num_xc/yousanj.png") no-repeat;
              background-size: 100% 100%;
              // margin-right: 1rem;
            }
            .border_num{
              // width: 2.75rem;
              overflow: hidden;
              box-sizing: border-box;
              // border: 1px solid;
              // height: (13/@size);
              // line-height:   (13/@size);
              // font-size: .7rem;
              font-size: (14/@size);

              font-family: Roboto;
              font-weight: 500; 
              
            }
          }
          .box_right_top_list_active{
            color: #f9d354;

            // width: .2rem;
            // height: (30/@size);
            border-right:.2rem solid  #1890FF; 
             
            border-radius: 2px;
          }
         
          
        }
        
      
         
      }
      .box_center{
         
          // 宽度可以使用rem但是高度的话rem没适配的 
          width:38.0208vw;
          height: (955/@size); 
      
          .box_center_top {
              overflow: hidden;
              box-sizing: border-box;
            width: 36.5rem;
            height: (578/@size); 
            background: url("/image/num_xc/center_top.png") no-repeat;
            background-size: 100% 100%;
            padding:(1/@size) 1rem;
            .top_title{
              // font-size: 1rem;
              font-size: (20/@size);

              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #FFFFFF;
            }
            .box_center_top_nums {
              width: 2.05rem;
              height: (51/@size);
              // font-size: 1.2rem;
              font-size: (24/@size);

              font-family: Roboto;
              font-weight: 400;
              color: #ffffff;
              background: url("/image/num_xc/xiaoshouze.png") no-repeat;
              background-size: 100% 100%;
            }
            .box_center_top_box{
                // width: 34.5rem;
                // height: 16.6rem;
                // border: 1px solid red;
                .box_center_top_left {
                  width: 5.4rem;
                  height: (64/@size);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: url("/image/num_xc/bigbsyq.png") no-repeat;
                  background-size: 100% 100%;
                  // font-size: .8rem;
                  font-size: (16/@size);

                  font-family: Source Han Sans SC;
                  font-weight: 400;
                  color: #a5b6d3;
                }
            }
            .maps{
              width: 23.1771vw;
              height: (314/@size);
              // border: 1px solid red;
            }
            .qihoubox {
              overflow: hidden;box-sizing: border-box;
              width:4rem;
              height: (68/@size); 
              background: linear-gradient(
                0deg,
                #ffa13f 0%,
                #1890ff 0%,
                rgba(3, 20, 57, 0) 100%
              );
               background: url("/image/num_xc/shid.png") no-repeat;
              background-size: 100% 100%;
              // opacity: 0.3;
              .qihoutitle {
                // font-size: .7rem;
                font-size: (14/@size);

                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #a5b6d3;
              }
              .qihounum {
                // font-size: .9rem;
                font-size: (18/@size);

                 
                font-family: Roboto;
                font-weight: 400;
                color: #1affe4;
                .sheshidu{
                  // font-size: .65rem;
                  font-size: (13/@size);

                }
              }
            }
          }
          
          .box_center_center{ 
            box-sizing: border-box;
              width: 36.5rem; 
              height: (281/@size); 
              color: #ffffff;  
              background: url("/image/num_xc/center_bottom.png") no-repeat;
              background-size: 100% 100%;
              padding-left: 2.5rem;
              padding-right: 2.55rem;
              padding-top: (30/@size);
              .nqyj{
                width: 31.5rem;
                height: (40/@size);
                font-size: .9rem;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #ffffff; 
                background: url("/image/num_xc/left_xz_pay.png") no-repeat;
                background-size: 100% 100%;
              }
              .boix-tab{
                width:31.5rem;  
                // font-size: .7rem;
                font-size: (14/@size);

                font-family: Source Han Sans SC;
                font-weight: 400;
                .h-38{
                    height: (38/@size);
                }
               .boix-tab_active{
                 background-color: #042358;
                
               }
                
              }
            .gyxsje{ 
              overflow: hidden;
              box-sizing: border-box;
              width: 36.5rem; 
              // border: 1px solid red;
                //  margin-top: 1.5rem; 
                  height:(280/@size); 
            }
              .left_xzzc {
                // font-size: .9rem;
                font-size: (18/@size);

                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #ffffff;
                width: 24.25rem;
                height: (40/@size);
                background: url("/image/num_xc/left_xz_pay.png") no-repeat;
                background-size: 100% 100%;
              }
              .select_box {
                width: 5rem;
                height: (30/@size); 
                background: rgba(3, 20, 57, 0);
                border: 0.1rem solid #00ceff;
                // padding-left: .4rem; 
                margin-left: 3.75rem;
                .select_box_left{
                  width:.35rem;
                  height: (7/@size);
                  margin-right: .4rem;
                  margin-left: .4rem;
                  background: url('/image/num_xc/right_quan.png') no-repeat;
                  background-size: 100% 100%;
                }
                .select_box_title{
                  // font-size: .7rem;
                  font-size: (14/@size);

                  font-family: Source Han Sans SC;
                  font-weight: 400;
                  color: #00CEFF
                }
                .select_box_right{
                  width: 1.55rem;
                  height: (29/@size); 
                  margin-left: .95rem;
                  background: url('/image/num_xc/right_select.png') no-repeat;
                  background-size: 100% 100%;
                }
              }
              
          }
          
          .box_center_bottom_item { 
              width: 28.45rem;
              height: (46/@size);
              margin-top: (30/@size);
              .bottom_item_bg {
                width: 7.45rem;
                height: (46/@size);
                line-height: (36/@size);
                text-align: center;

                margin-right: 4.25rem;
              // border: 1px  solid #ffffff;

              // font-size: 0.8rem; 
              font-size: (16/@size);

              
              //   margin-right: 3.75rem;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #a5b6d3;
                background: url("/image/num_xc/center_bottom (1).png") no-repeat;
                background-size: 100% 100%;
                color: #a5b6d3;
              }
              .box_center_bottom_item_active {
                background: url("/image/num_xc/center_bottom1.png") no-repeat;
                background-size: 100% 100%;
                color: #ffffff;
              }
            }
      }
       .box_right{
          overflow: hidden;
          box-sizing: border-box;
          // width: 28.9063vw;
          height: (955/@size);
          padding: (40/@size) 1.5rem   0rem  (35/@size); 
          background: url("/image/num_xc/left.png") no-repeat;
          background-size: 100% 100%;
          .gyjj{
            height: (197/@size);
            width: 100%;
            border: 1px solid;
            .shipjk{
              width: 10rem;
              height:(150/@size);
              img{width: 100%;height: 100%;}
              .spflex{
                width: 5.45rem;
                height: (48/@size);
                background: url("/image/num_xc/jiank.png") no-repeat;
                background-size: 100% 100%;
                font-size: (16/@size);
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #FFFFFF;
              }
            }
            .gyjjvalue{
              width: 13.5rem;
              height: (112/@size);
              font-size: (16/@size);
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #A5B6D3;
            }
          }
          .zhichusr{
            height: (245/@size);
          }
          .chanl{
            height: (225/@size);
          }
           
          .box_right_top{
              // width: 11rem;
              // border: 1px solid red;
              height: (247/@size);
              .box_right_top_quan{
                // border: 1px solid red; 
                  width: 10.6rem;
                  height: (212/@size);
                  // background: linear-gradient(0deg, #1890FF 0%, #1AFFE4 100%);
                  // border-radius: 50%;
              }
              .box_right_top_list_active{
                color: #f9d354;

                // width: .2rem;
                // height: (30/@size);
                border-right:.2rem solid  #1890FF; 
                 
                border-radius: .1rem;
              }
              .box_right_top_list{
                  width: 11rem;
                  // border: 1px solid red; 
                  height: (247/@size);
                  color: #A5B6D3; 
                  // border-right: 2px solid red;
                  // background: #1890FF;
                  background: #042254;
                  // padding-top: 1rem;
                  padding-top:(20/@size);

                  padding-left: .85rem; 
                  border-radius: .3rem;
                  padding-right: .2rem;
                
                  .border_id{
                    width: 1rem;
                    height: (20/@size);
                    background: #031439;
                    // font-size: .7rem;
                    font-size: (14/@size);
                    font-family: Source Han Sans SC;
                    font-weight: 400;
                  
                    border-radius: 50%;
                  }
                  .yjtitle{
                    // font-size: .7rem;
                    font-size: (14/@size);

                    font-family: Source Han Sans SC;
                    font-weight: 400;
                    // color: #A5B6D3;
                  }
                  .yjicon{
                    width: .8rem;
                    height: (18/@size);
                    background: url("/image/num_xc/yousanj.png") no-repeat;
                    background-size: 100% 100%;
                  }
                  .border_num{
                    // font-size: .8rem;
                    font-size: (16/@size);

                    font-family: Roboto;
                    font-weight: 500; 
                    margin-right: .55rem;
                  }
              }
            }
          
         
          .jb_line {
            height: (30/@size); 
             width: 18.75rem;
            border: 0.1rem solid;
            .jb_line_item {
               width: 18.75rem;
              height: .05rem;
              background: linear-gradient(
                90deg,
                rgba(0, 206, 255, 0.1) 0%,
                #00ceff 52%,
                rgba(0, 206, 255, 0.1) 100%
              );
              border-radius: 0.05rem;
            }
          }

          
        .bsyq_right {
          width: 5.2rem;
          // box-sizing: border-box;
          overflow: hidden;
          height:(70/@size);
          background: url("/image/num_xc/quezhenbg.png") no-repeat;
          background-size: 100% 100%;
          .bsyq_right_title {
            // font-size: .7rem;
            font-size: (14/@size);

            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #a5b6d3;
          }
          .bsyq_right_num {
            // font-size: 1.2rem;
            font-size: (24/@size);

            font-family: Roboto;
            font-weight: 500;
          }
        }
        .gyyscharts{  
          height: (275/@size);
          // border: 1px solid red;
        }


       }
        
    }
}